{% extends 'base.html' %}

{% block contents_inner %}
    <div class="col-md-12">
    {% csrf_token %}
        <div class="content-details" id="mapChart" style="width: 100%; height: 1080px;"></div>
    </div>
{% endblock %}

{% block js_code %}
<script>
    var myChart = echarts.init(document.getElementById('mapChart'));

    $(document).ready(function () {
        // 获取当前时间
        var now = new Date();
        // 获取年、月、日、时、分、秒
        var year = now.getFullYear();
        var month = now.getMonth() + 1; // 月份是从0开始的，所以需要加1
        var day = now.getDate();
        var hours = now.getHours();
        var minutes = now.getMinutes();
        var seconds = now.getSeconds();

        // 对于单个数字的月、日、时、分、秒，前面补零以保持两位数格式
        month = String(month).padStart(2, '0');
        day = String(day).padStart(2, '0');
        hours = String(hours).padStart(2, '0');
        minutes = String(minutes).padStart(2, '0');
        seconds = String(seconds).padStart(2, '0');

        // 格式化为"年-月-日 时:分:秒"
        var formattedTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;

        $.ajax({
            url: '{% url 'chart:AQI_map_distribution' %}',
            type: 'post',
            headers: {"X-CSRFToken": $("[name='csrfmiddlewaretoken']").val()},
            success: function(data) {
                var option = {
                    title: {
                        text: '全国主要城市空气质量',
                        subtext: '数据日期: ' + formattedTime,
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    visualMap: {
                        min: 0,
                        max: 300,
                        text: ['高', '低'],
                        realtime: false,
                        calculable: true,
                        inRange: {
                            color: ['#00e400', '#ffff00', '#ff7e00', '#ff0000', '#99004c', '#7e0023']
                        },
                        pieces: [
                            {min: 0, max: 50, color: '#00e400'}, // 绿色
                            {min: 51, max: 100, color: '#ffff00'}, // 黄色
                            {min: 101, max: 150, color: '#ff7e00'}, // 橙色
                            {min: 151, max: 200, color: '#ff0000'}, // 红色
                            {min: 201, max: 300, color: '#99004c'}, // 紫色
                            {min: 301, color: '#7e0023'} // 深紫色
                        ]
                    },
                    series: [{
                        name: 'AQI',
                        type: 'map',
                        mapType: 'china',
                        label: {
                            show: true
                        },
                        data: data.mapData
                    }]
                };
                myChart.setOption(option);
            },
            error: function(error) {
                console.error('请求数据失败:', error);
            }
        });
    });
</script>
{% endblock %}
